<template>
	<page>
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar title="首页" :isBack="false" bgColor="#eee"></u-navbar>
		<!-- #endif -->

		<view class="container">
			<image src="/static/home-picture.png" class="picture"></image>
			<view class="form">
				<view class="form-item">
					<view class="text-black text-lg">出生年月</view>
					<view class="input">
						<picker
							mode="date"
							fields="month"
							:value="birthday"
							:end="currentDate"
							start="1930-01-01"
							@change="bindDateChange"
						>
							<text class="text-black text-lg">{{ birthday || '请选择出生年月' }}</text>
						</picker>
						<image src="/static/icon-calendar.png" class="icon-calendar"></image>
					</view>
				</view>
				<view class="form-item">
					<view class="text-black text-lg">性别及人员类型</view>
					<view class="input">
						<picker @change="bindPickerChange" :value="current" :range="typeList">
							<text class="text-black text-lg">{{ typeList[current] || '请选择人员类型' }}</text>
						</picker>
						<image src="/static/icon-arrow.png" class="icon-arrow"></image>
					</view>
				</view>
				<view class="btn-group">
					<image src="/static/btn-submit.png" class="btn" @tap="submit"></image>
					<image src="/static/btn-reset.png" class="btn" @tap="reset"></image>
				</view>
			</view>
			<view class="text-df text-999 text-center padding-top-lg">
				具体退休时间以国家相关规定为准
			</view>
		</view>

		<view class="contact" :style="{ top: customBar }">
			<view class="notice">
				<u-notice-bar
					:text="notice"
					icon=""
					fontSize="12"
					bgColor="#fff"
					color="#666"
					duration="5000"
					direction="column"
				></u-notice-bar>
			</view>
			<view class="box">
				<image src="/static/icon-contact.png"></image>
				<button open-type="contact"></button>
			</view>
		</view>
	</page>
</template>

<script setup lang="ts">
import { mpShare } from '@/api/share'
import utils from '@/common/utils'

const customBar = `${uni.getStorageSync('customBar') + 750}rpx`

const notice = ['你想了解小程序吗？', '你想搭建自己的私有化商城吗？', '你想拥有自己的企业网站吗？']

// 出生年月
const birthday = ref('2000-01-01')
// 当前日期
const currentDate = ref('')
// 选择生日
function bindDateChange(e: any) {
	birthday.value = e.detail.value
}

// 当前类型
const current: any = ref('')
// 人员类型
const typeList = ref(['男职工', '原法定退休年龄55周岁女职工', '原法定退休年龄50周岁女职工'])
// 选择类型
function bindPickerChange(e: any) {
	current.value = e.detail.value
}

// 重置
function reset() {
	current.value = ''
	birthday.value = ''
}
// 提交
function submit() {
	if (!birthday.value) {
		return utils.tip('请选择出生年月')
	} else if (current.value === '') {
		return utils.tip('请选择人员类型')
	}
	utils.push({
		path: '/pages/index/sharePoster',
		query: {
			current: current.value,
			birthday: birthday.value
		}
	})
}

onLoad(() => {
	const t = new Date()
	const y = t.getFullYear()
	const m = t.getMonth()
	const d = t.getDate()

	currentDate.value = `${y + 6}-${(m + 1).toString().padStart(2, '0')}-${d
		.toString()
		.padStart(2, '0')}`

	const codeScene = uni.getStorageSync('codeScene')
	if (codeScene.scene == 1155) {
		uni.removeStorageSync('codeScene')
	}
})

onShareAppMessage(() => {
	return mpShare()
})

onShareTimeline(() => {
	return mpShare()
})
</script>

<style>
page {
	background-color: #eee;
}
</style>
<style lang="scss" scoped>
.container {
	padding: 0 18rpx 50rpx;
	background-color: #eee;
	.picture {
		width: 713rpx;
		height: 775rpx;
	}
	.form {
		padding: 28rpx 32rpx 0;
	}
	.form-item {
		margin: 0 0 32rpx;
	}
	.input {
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		margin: 24rpx 0 0;
		padding: 0 0 0 28rpx;
		position: relative;
		border-radius: 12rpx;
		border: 2rpx solid #000;
		.icon-arrow {
			width: 40rpx;
			height: 22rpx;
			position: absolute;
			top: 26rpx;
			right: 32rpx;
			z-index: 2;
		}
		.icon-calendar {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 10rpx;
			right: 32rpx;
			z-index: 2;
		}
	}
	.btn-group {
		width: 100%;
		padding: 0 50rpx;
		display: flex;
		justify-content: space-between;
		.btn {
			width: 260rpx;
			height: 114rpx;
		}
	}
}
.contact {
	position: fixed;
	right: 12rpx;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	.notice {
		width: 450rpx;
		margin: 0 0 12rpx;
		:deep(.u-notice-bar) {
			border-radius: 20rpx;
			box-shadow: 0 0 20rx 8rpx rgba(0, 0, 0, 0.5);
		}
	}
	.box {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		button {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
			top: 0;
			left: 0;
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #fff;
		}
	}
}
</style>
